<template>
  <div class="chart-line-container">
    <a-radio-group value="a">
      <a-radio-button value="a">
        收入段
      </a-radio-button>
      <a-radio-button value="b">
        营销方案
      </a-radio-button>
    </a-radio-group>

    <div id="area" class="chart" />
  </div>
</template>

<script>
import { Area } from '@antv/g2plot'

export default {
  mounted () {
    this.$nextTick(() => {
      fetch('https://gw.alipayobjects.com/os/bmw-prod/1d565782-dde4-4bb6-8946-ea6a38ccf184.json')
        .then((res) => res.json())
        .then((data) => {
          const area = new Area('area', {
            data,
            xField: 'Date',
            yField: 'scales',
            xAxis: {
              range: [0, 1],
              tickCount: 5,
            },
            areaStyle: () => {
              return {
                fill: 'l(270) 0:#ffffff 0.5:#7ec2f3 1:#1890ff',
              }
            },
          })
          area.render()
        })
    })
  },
}
</script>

<style lang="scss" scoped>
.chart {
  margin-top: $margin-sm;
}
</style>
